AI解析を使った画像シェアWEBアプリを超簡単に作る【設定編】#reinvent

はじめに

このエントリはre:Invent2018で参加したワークショップのまとめです。 AmplifyとGraphQL、フロントにReact.jsを使って写真をシェアできるWEBアプリケーションを作るというものです。

Amplify CLIを超活用してAPIを作成したりLambdaをデプロイしたりと学びが多かったので、 何章かに分けて手順をまとめました。長くなりますがお付き合いいただけると幸いです。

作るもの

ユーザーが写真を共有できるWEBアプリを作成します。仕様は以下です。

• サインアップ、サインイン機能でどのユーザが何を投稿したか紐づけられるようにする
• APIサーバーを設定し、ユーザーとひもづく写真の情報を取得、表示させる
• アルバムの設定データを保存するデータベースを設定する
• 写真を保存するためにS3バケットを作成する
• 写真のサムネイルを自動生成する
• Rekognitionで認識したデータを写真にタグ付けする
• 写真をタグで検索できるようにする

利用するもの

• AWS Amplify CLI: AWSリソースのプロビジョニング
• AWS Amplify JS Library: AWSリソースとフロントエンドの疎通
• React.js：フロントエンド構築
• Cloud9 IDE：開発環境

利用するAWS サービス

• AppSync(GraphQL) ：GraphQL APIのホスティング
• Amazon S3：写真との保存先
• Amazon Rekognition：画像解析、写真へのラベリング
• DynamoDB：アルバム、写真、ラベル、ユーザーの情報をストアする
• Cognito：Auth機能
• AWS Lambda：サムネイルの自動生成機能
• Elastic Search：ラベル別に写真を検索

アーキテクチャ

Cloud9設定

開発環境にはCloud9を利用します。 Cloud9環境を新規に作成します。

• リージョンがデフォルトでシンガポールになっているので、N.Virginiaに変更する
• Create EnvironmentからCloud9環境を新規作成
• 環境名を”workshop”にして保存する
• ”Other instance type”を選択し、インスタンスサイズはt2.mediumを選ぶ
• 他の設定はそのまま次へ進み、”Create environment”をクリックする

リージョンはどこでもいいのですが、後でRekognitionを使うので対応しているリージョンである必要があります。（デフォルトに設定されるシンガポールリージョンだと使えないので注意です。）

必要な諸々をCloud9環境にインストール

# AWS CLIをアップデートする
pip install --user --upgrade awscli

# Lambdaの設定と合わせるためNode.js v8.10をインストール＆設定
nvm install v8.10.0
nvm alias default v8.10.0

# AWS Amplify CLIをインストール
npm install -g @aws-amplify/cli

混乱を防ぐ意味で使うリソースのリージョンを全て統一することをお勧めします。

リソースのデフォルトリージョンの設定

cat <<END > ~/.aws/config
[default]
region=us-east-1
END

AWS Amplify CLI

• AWS Amplify CLI はモバイルアプリとウェブアプリケーションに特化したコマンドラインツールです。
• Amplifyの機能を利用するためには既存のAWSユーザーアカウントと紐付ける設定が必要です。
• 今回はAWS Cognito, S3, DynamoDB, AppSync, Lambda, Rekognition, Elasticsearch Serviceを全てAmplify CLIから設定します。

次の章ではAmplify CLIをフル活用してAWSリソースを構築してゆきます。

資料

• ワークショップ資料
• Amplify CLI
• AWS Amplify JavaScript library